{% extends 'base.html' %}

{% block body %}
  <div class="container-fluid maxWidth">
        <div class="d-flex  page main-sl">
  
              <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

                  <ol class="carousel-indicators">
                      {% for i in range(user_top_artists| length) %}
                        {% if i == 0 %}
                            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        {% else %}
                          <li data-target="#carouselExampleIndicators" data-slide-to="{{i}}"></li>
                        {% endif %}
                      {% endfor %}
                    </ol>

                      <div class="carousel-inner">

                        {% for i in range(user_top_artists| length) %}
                          {% if i == 0 %}
                          <div class="carousel-item cursor-pointer-all-obj active">
                          {% else %}
                          <div class="carousel-item cursor-pointer-all-obj">
                          {% endif %}
                              <a class='no-link' href='{{ url_for('artist', uri=user_top_artists[i].id)}}'>
                                <div class="line">
                                        <div class="image-shadow-line"  loading="lazy"  style="background-image:  linear-gradient(
                                          rgba(0, 0, 0, 0.3),
                                          rgba(0, 0, 0, 0.3)
                                        ),url({{user_top_artists[i].image_big}});" alt="First slide"></div>
                                        <div class="carousel-caption d-none d-md-block">
                                            <h2><p class="item-text-2">{{ user_top_artists[i].name }}</p></h2>
                                        </div>
                                </div>
                                </a>
                          </div>   
                        {% endfor %}
                        
                      </div>


                      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                          <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="sr-only">Next</span>
                        </a>
              </div>
  
        </div>
  
    </div>
    <br>




  <p class='title'>
    For You
  </p>

  <div class='albums-slider lazy' style='width:82%; margin-left: 19%;' >
    
    {% for playlist in user_featured_playlists %}
        <div class="border cursor-pointer-all-obj">
            <a class='no-link' href='{{ url_for('playlist', uri=playlist.id, us=playlist.owner_id)}}'>
              <div class="image-shadow" style="background-image:url({{playlist.image}})" ></div>
              <p class="item-text-3">{{playlist.name}}</p>
            </a>
        </div>
      {% endfor %}

  </div>


<div class='conc-main-slider lazy' style='width:82%; margin-left: 18%;' >

    <div class="border-conc-r">

        <div class="image-shadow-conc-r" style="background-image:url({{user_top_tracks[0].alb_image}});"></div>

        <figcaption class="item-text-16">
            <h1 class="display-4"><span class="badge badge-danger">10</span></h1>
            <h2>Songs</h2>
        </figcaption>

       

        <figcaption class="item-text-6">Your favorite tracks</figcaption>
    </div>
</div>

<div class="container-fluid maxWidth lazy" style='background: rgb(28,28,30); margin-top: -5px;'>
        <table class="table table-dark justify-content space-between">
            <tbody>

              {% for i in range(user_top_tracks| length) %}

                {% if i == 0 %}
                  <tr style="height:40px; border: 0px solid #fff !important;" >
                {% else %}
                  <tr style="height:40px;" > 
                {% endif %}

                    {% if i == 0 %}
                      <th scope="row" style='padding: 0px;border: 0px solid #fff !important;'> 
                    {% else %}
                      <th scope="row" style='padding: 0px;'> 
                    {% endif %}

                      <a class='no-link' href='artist.html'>
                        <div class="image-shadow-prev cursor-pointer-all-obj" style="background-image:url({{user_top_tracks[i].alb_image}})" ></div>
                      </a>
                    </th>

                      {% if i == 0 %}
                        <td style="border: 0px solid #fff !important;">
                      {% else %}
                        <td>
                      {% endif %}
                          <a class='no-link' style='color: #fff;' href='{{ url_for('song', uri=user_top_tracks[i].trc_id)}}''>
                              {% if user_top_tracks[i].trc_name|length >= 25 %}
                                {{user_top_tracks[i].trc_name[:23]}}...
                              {% else %}
                                {{user_top_tracks[i].trc_name}}
                              {% endif %}
                          </a>
                       </td>

                       {% if i == 0 %}
                        <td style="border: 0px solid #fff !important;">
                      {% else %}
                        <td>
                      {% endif %}
                          <a class='no-link' style='color: #fff;' href='{{ url_for('artist', uri=user_top_tracks[i].art_id)}}''>
                              {% if user_top_tracks[i].art_name|length >= 25 %}
                                {{user_top_tracks[i].art_name[:23]}}...
                              {% else %}
                                {{user_top_tracks[i].art_name}}
                              {% endif %}
                          </a>
                        </td>

                      {% if i == 0 %}
                          <td style="border: 0px solid #fff !important;">
                        {% else %}
                          <td>
                        {% endif %}
                          <a class='no-link' style='color: #fff;' href='{{ url_for('album', uri=user_top_tracks[i].alb_id)}}''>
                              {% if user_top_tracks[i].alb_name|length >= 20 %}
                                {{user_top_tracks[i].alb_name[:17]}}...
                              {% else %}
                                {{user_top_tracks[i].alb_name}}
                              {% endif %}
                          </a>
                        </td>
                        {% if i == 0 %}
                          <th class="text-justify text-right" style="border: 0px solid #fff !important;">
                        {% else %}
                        <th class="text-justify text-right">
                        {% endif %}
                        <a class='no-link download-link' href="{{ url_for('listenOnSpotifySong', uri=user_top_tracks[i].trc_id)}}">
                          <span class="badge badge-success download-button">
                              <i class="fab fa-spotify"></i> Listen on Spotify
                          </span>
                        </a>

                        <a class='no-link download-link' href="{{ url_for('downloadSingleSong', uri=user_top_tracks[i].trc_id)}}">
                          <span class="badge badge-primary download-button">
                            <i class="fas fa-arrow-alt-circle-down"></i> Download
                          </span>
                        </a>
                    </th>

                </tr>

              {% endfor %}

            </tbody>
          </table>
</div>
<br>

<p class='title'>
    Artists
  </p>

  <div class='artists-slider lazy' style='width:82%; margin-left: 18%;' >

    {% for artist in user_saved_artists %}

      <div class="border cursor-pointer-all-obj">
          <a class='no-link' href='{{ url_for('artist', uri=artist.id)}}'>
            <div class="image-shadow-circ lazy-bg" style="background-image:url({{artist.image}})" ></div>
            <p class="item-text-3">{{ artist.name }}</p>
          </a>
      </div>

    {% endfor %}

  </div>




<div class='conc-main-slider lazy' style='width:80%; margin-left: 18%;' >
  <a class='no-link' href='{{ url_for('new_releases')}}'>
    <div class="line cursor-pointer-all-obj">

      <div class="image-shadow-line" style="background: rgb(251,111,74);
          background: linear-gradient(152deg, rgba(251,111,74,1) 0%, rgba(210,83,177,1) 74%);">
      </div>
      <div class="carousel-caption d-none d-md-block">
        <h2>
          <p class="item-text-13">
            New Albums And Singles
          </p>
        </h2>
      </div>
    </div>
  </a>

</div>
<br>



  <p class='title'>
    Playlists
  </p>

  <div class='albums-slider lazy' style='width:80%; margin-left: 18%;' >
    {% for playlist in user_saved_playlists %}
      <div class="border-playlist cursor-pointer-all-obj">
          <a class='no-link' href='{{ url_for('playlist', uri=playlist.id, us=playlist.owner_id)}}'>
            <div class="image-shadow-playlist" style="background-image:url({{playlist.image}})" ></div>
            <p class="item-text-5">{{ playlist.name }}</p>
          </a>
      </div>
    {% endfor %}


      
  </div>




  <div class="container maxWidth lazy" style='margin-top: -10px;'>
        <div class="d-flex flex-wrap page">
    
              <div id="carouselExample" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">

                                <div class="carousel-item">
                          
                                        <div class="line">
                                              <div class="image-shadow-line" style="background: rgb(203,53,107);
                                              background: linear-gradient(152deg, rgba(203,53,107,1) 0%, rgba(189,63,50,1) 100%);"></div>
                                              <div class="carousel-caption d-none d-md-block">
                                                  <h2><p class="item-text-13">Your Time Capsule</p></h2>
                                              </div>
                                        </div>
                                    
                                </div>
                    </div>
              </div>
        </div>
    </div>
<br>


<div class='conc-main-slider lazy' style='width:85%; margin-left: 16.5%; padding-bottom: 0px !important;' >
    <div class="line" style='margin-top: 10px; border-radius: 0px !important;'>
           <div class="image-shadow-line" style="background-image:url({{ url_for('static',filename='images/telegram.webp') }});filter: blur(5px);
           -webkit-filter: blur(5px);  -webkit-mask-image:-webkit-gradient(linear, right bottom, right top, from(rgba(28,28,30,1)), to(rgba(28,28,30,0))) !important;
       mask-image: linear-gradient(to left, rgba(28,28,30,1) 30%, rgba(28,28,30,0)); border-radius: 0px !important;"></div>
           <div class="carousel-caption d-none d-md-block">
               <h2><p class="item-text-19">Get it on Telegram</p></h2>
               <h2><p class="item-text-20">@SpotifyMusicDownloaderBot</p></h2>
           </div>
   </div>
   </div>


{% endblock %}
